<script lang="ts" setup>

import "../ui.css";
import {useDialog, useMessage} from "naive-ui";
import {util} from "../ts/util";
import {allMenu} from "../router/menu";
import {h, ref} from "vue";
import {RouterLink, useRoute} from "vue-router";
import {IMenu} from "../ts/type.ts";

util.msg = useMessage()
util.dialog = useDialog()

const menuOptions = allMenu

let renderMenuLabel = (option: IMenu) => {
  if (option.path != '') {
    return h(
        RouterLink,
        {
          to: {
            name: option.key
          }
        },
        {default: () => option.label}
    )
  }
  return option.label as string
}

let route = useRoute()
const selectedKeyRef = ref(route.name)
</script>

<template>
  <n-layout has-sider>
    <n-layout-sider
        :collapsed-width="120"
        :width="240"
        bordered
        collapse-mode="width"
        content-style="padding: 24px;"
        show-trigger="arrow-circle"
    >
      <n-menu
          :options="menuOptions"
          :render-label="renderMenuLabel"
          v-model:value="selectedKeyRef"
      />
    </n-layout-sider>
    <n-layout-content>
      <router-view/>
    </n-layout-content>
  </n-layout>
</template>

<style scoped>

</style>